<template>
	<coreshop-page title="售后列表" mode="left">
		<view class="layout-goods-box">
			<view v-if="state.aftersalesList.length > 0">
				<view class="item-box" v-for="item, index in state.aftersalesList" :key="index">
					<view class="aftersales-box">
						<view class="aftersales-id">
							<uv-icon name="order" color="#606266" size="17"></uv-icon>
							<text class="tit">售后单号：{{ item.aftersalesId }}</text>
						</view>
						<view class="aftersales-status">
							<uv-tags v-if="item.status === AftersalesStatusEnum.pendingReview" size="mini" text="待审核"
								type="warning" plain></uv-tags>
							<uv-tags v-if="item.status === AftersalesStatusEnum.approvedReview" size="mini" text="审核通过"
								type="success" plain></uv-tags>
							<uv-tags v-if="item.status === AftersalesStatusEnum.rejectedReview" size="mini" text="审核拒绝"
								type="error" plain></uv-tags>
						</view>
					</view>
					<view class="goods-box">
						<view class="item-goods" v-for="itemChild in item.items" :key="itemChild.id">
							<coreshop-goods-card type="horizontal" :nameOverflow="2" imgHeight="130rpx"
								imgWidth="130rpx" :goodsData="hanldeCombinationGoodsData(itemChild)">
								<template #goodPrice>
									<view class="desc-box">
										<view class="addon">{{ itemChild.addon }}</view>
										<view class="num">x{{ itemChild.nums }}</view>
									</view>
								</template>
							</coreshop-goods-card>
						</view>
					</view>
					<view class="price-box">
						<view class="price">退款金额：￥{{ item.refundAmount }}</view>
						<view class="btn"
							@click="handleRouteNavigateTo(`/pages/subpackage/member/afterSales/detail/detail?id=${item.aftersalesId}`)">
							查看详情</view>
					</view>
				</view>
				<view class="no-data" v-if="state.page === state.totalPages">没有更多了</view>
			</view>
			<view v-else class="layout-empty-box">
				<coreshop-empty :mode="EmptyEnum.data" text="暂无售后"></coreshop-empty>
			</view>
		</view>

	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive, onMounted } from 'vue';
	import { queryAftersalesList } from '@/core/api';
	import type { Response, AftersalesListType, AftersalesGoodsType } from '@/core/models';
	import { onReachBottom } from '@dcloudio/uni-app';
	import { AftersalesStatusEnum, EmptyEnum } from '@/core/enum';
	import { handleRouteNavigateTo } from '@/core/utils';

	const state = reactive<{
		aftersalesList : Array<AftersalesListType>;
		totalPages : number;
		page : number;
		limit : number;
	}>({
		aftersalesList: [],
		totalPages: 1,
		page: 1,
		limit: 10,
	})

	onMounted(() => {
		getAftersalesList();
	})

	/** 获取售后列表 */
	const getAftersalesList = async () => {
		const aftersalesList : Response<any> = await queryAftersalesList({
			page: state.page,
			limit: state.limit,
		});
		state.totalPages = aftersalesList?.data?.totalPage;
		state.aftersalesList = state.aftersalesList.concat(aftersalesList?.data?.list);
	}

	/** 组合商品数据传入组件 */
	const hanldeCombinationGoodsData = (item : AftersalesGoodsType) => {
		return {
			id: item.id,
			image: item.imageUrl,
			name: item.name,
			brief: '',
		}
	}


	onReachBottom(() => {
		if (state.totalPages > state.page) {
			state.page++;
			getAftersalesList();
		}
	})
</script>
<style lang="scss" scoped>
	@import './list.scss';
</style>